<template>
    <div class="bread-list">
      <i class="bread-icon"></i>
      <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in state.levelList" :key="item">
            <span v-if="
                item.redirect === 'noRedirect' ||
                index == state.levelList.length - 1
              " 
              class="no-redirect">{{ item.meta.title }}</span>
            <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
  </template>
  <script setup lang='ts'>
  import { reactive, onMounted, toRefs, getCurrentInstance, watch } from "vue";
  import { useRouter, useRoute } from "vue-router";
  const state = reactive({
    levelList: [],
    flag: true,
  });
  // 获取当前路由
  const route = useRoute()
  // 获取路由实例
  const router = useRouter()
  
  onMounted(() => {
    getBreadcrumb();
  });
  const getBreadcrumb = () => {
    // only show routes with meta.title
    let matched = route.matched.filter((item) => item.meta && item.meta.title);
    const first = matched[0];
  
    //   if (!isDashboard(first)) {
    //     matched = [{ path: '/home', meta: { title: '首页' } }].concat(matched);
    //   }
    state.levelList = matched.filter(
      (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
    );
    console.log(state.levelList);
  }
  watch(
    () => route.path,
    (newRoute) => {
      getBreadcrumb();
    }
  )
  const isDashboard = (route) => {
    const name = route && route.name;
    if (!name) {
      return false;
    }
    return name.trim() === "Index";
  }
  const handleLink = (item) => {
    const { redirect, path } = item;
    if (redirect) {
      router.push(redirect);
      return;
    }
    router.push(path);
  }
  </script>
  
  <style lang="scss" scoped>
  .bread-list {
    height: 50px;
    display: flex;
    align-items: center;
    .bread-icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      background: url("../assets/icon/bread.png");
      background-size: 100% 100%;
      vertical-align: middle;
    }
    .app-breadcrumb.el-breadcrumb {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
  
      .no-redirect {
        color: #1d5df6;
        cursor: text;
      }
    }
  }
  </style>
  